<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <font-awesome-icon icon="fa-solid fa-angle-left" onclick="history.go(-1)" />
            <p>我的预约</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <!-- 标签按钮 -->
        <div class="tabs">
            <el-button plain :class="{ selected: currentTab === 'all' }" @click="selectTab('all')">全部</el-button>
            <el-button plain :class="{ selected: currentTab === 'pending' }" @click="selectTab('pending')">待支付</el-button>
            <el-button plain :class="{ selected: currentTab === 'paid' }" @click="selectTab('paid')">已支付</el-button>
            <el-button plain :class="{ selected: currentTab === 'inProgress' }" @click="selectTab('inProgress')">进行中</el-button>
            <el-button plain :class="{ selected: currentTab === 'archived' }" @click="selectTab('archived')">已完成</el-button>
            <el-button plain :class="{ selected: currentTab === 'refunding' }" @click="selectTab('refunding')">退款中</el-button>
            <el-button plain :class="{ selected: currentTab === 'cancelled' }" @click="selectTab('cancelled')">已取消</el-button>
            <el-button plain :class="{ selected: currentTab === 'refunded' }" @click="selectTab('refunded')">已退款</el-button>
        </div>
        <div style="height: 10vw; margin-top: 1vw"></div>

        <!-- 订单列表 -->
        <div class="listShow" v-if="currentTab === 'all'">
            <h3>全部</h3>
            <ul>
                <li v-show="orderListAll.length==0"><span style="color: gray;">空空如也~~</span></li>
                <li v-for="(order, index) in orderListAll" :key="index">
                    <div class="left">
                        <p>{{ order.orderDate }}</p>
                        <p>{{ order.setmealName }}</p>
                    </div>
                    <el-button plain @click="showOrder(order.orderId)">
                        {{ buttonText(order.state) }}
                    </el-button>
                </li>
            </ul>
        </div>

        <div class="listShow" v-if="currentTab === 'pending'">
            <h3>待支付</h3>
            <ul>
                <li v-show="orderListPending.length==0"><span style="color: gray;">空空如也~~</span></li>
                <li v-for="(order, index) in orderListPending" :key="index">
                    <div class="left">
                        <p>{{ order.orderDate }}</p>
                        <p>{{ order.setmealName }}</p>
                    </div>
                    <el-button plain @click="showOrder(order.orderId)">
                        {{ buttonText(order.state) }}
                    </el-button>
                </li>
            </ul>
        </div>

        <div class="listShow" v-if="currentTab === 'paid'">
            <h3>已支付</h3>
            <ul>
                <li v-show="orderListPaid.length==0"><span style="color: gray;">空空如也~~</span></li>
                <li v-for="(order, index) in orderListPaid" :key="index">
                    <div class="left">
                        <p>{{ order.orderDate }}</p>
                        <p>{{ order.setmealName }}</p>
                    </div>
                    <el-button plain @click="showOrder(order.orderId)">
                        {{ buttonText(order.state) }}
                    </el-button>
                </li>
            </ul>
        </div>

        <!-- 其他状态的订单列表同理 -->
        <div class="listShow" v-if="currentTab === 'inProgress'">
            <h3>进行中</h3>
            <ul>
                <li v-show="orderListInProgress.length==0"><span style="color: gray;">空空如也~~</span></li>
                <li v-for="(order, index) in orderListInProgress" :key="index">
                    <div class="left">
                        <p>{{ order.orderDate }}</p>
                        <p>{{ order.setmealName }}</p>
                    </div>
                    <el-button plain @click="showOrder(order.orderId)">
                        {{ buttonText(order.state) }}
                    </el-button>
                </li>
            </ul>
        </div>

        <div class="listShow" v-if="currentTab === 'archived'">
            <h3>已完成</h3>
            <ul>
                <li v-show="orderListArchived.length==0"><span style="color: gray;">空空如也~~</span></li>
                <li v-for="(order, index) in orderListArchived" :key="index">
                    <div class="left">
                        <p>{{ order.orderDate }}</p>
                        <p>{{ order.setmealName }}</p>
                    </div>
                    <el-button plain @click="showOrder(order.orderId)">
                        {{ buttonText(order.state) }}
                    </el-button>
                </li>
            </ul>
        </div>

        <div class="listShow" v-if="currentTab === 'refunding'">
            <h3>退款中</h3>
            <ul>
                <li v-show="orderListRefunding.length==0"><span style="color: gray;">空空如也~~</span></li>
                <li v-for="(order, index) in orderListRefunding" :key="index">
                    <div class="left">
                        <p>{{ order.orderDate }}</p>
                        <p>{{ order.setmealName }}</p>
                    </div>
                    <el-button plain @click="showOrder(order.orderId)">
                        {{ buttonText(order.state) }}
                    </el-button>
                </li>
            </ul>
        </div>

        <div class="listShow" v-if="currentTab === 'cancelled'">
            <h3>已取消</h3>
            <ul>
                <li v-show="orderListCancelled.length==0"><span style="color: gray;">空空如也~~</span></li>
                <li v-for="(order, index) in orderListCancelled" :key="index">
                    <div class="left">
                        <p>{{ order.orderDate }}</p>
                        <p>{{ order.setmealName }}</p>
                    </div>
                    <el-button plain @click="showOrder(order.orderId)">
                        {{ buttonText(order.state) }}
                    </el-button>
                </li>
            </ul>
        </div>

        <div class="listShow" v-if="currentTab === 'refunded'">
            <h3>已退款</h3>
            <ul>
                <li v-show="orderListRefunded.length==0"><span style="color: gray;">空空如也~~</span></li>
                <li v-for="(order, index) in orderListRefunded" :key="index">
                    <div class="left">
                        <p>{{ order.orderDate }}</p>
                        <p>{{ order.setmealName }}</p>
                    </div>
                    <el-button plain @click="showOrder(order.orderId)">
                        {{ buttonText(order.state) }}
                    </el-button>
                </li>
            </ul>
        </div>


        <div class="bottom-ban"></div>
        <Footer></Footer>

        <el-dialog v-model="dialogVisible" title="订单信息" width="95%" :before-close="handleClose">
            <section>
                <div class="title">
                    <p>体检人信息</p>
                </div>
                <table>
                    <tr>
                        <td>姓名:</td>
                        <td>{{ confirmOrder.user.realName }}</td>
                    </tr>
                    <tr>
                        <td>证件号码:</td>
                        <td>{{ confirmOrder.user.identityCard }}</td>
                    </tr>
                    <tr>
                        <td>出生日期:</td>
                        <td>{{ confirmOrder.user.birthday }}</td>
                    </tr>
                    <tr>
                        <td>手机号码:</td>
                        <td>{{ confirmOrder.user.userId }}</td>
                    </tr>
                </table>
                <div class="title">
                    <p>体检日期</p>
                </div>
                <table>
                    <tr>
                        <td>{{ confirmOrder.orderDate }}</td>
                    </tr>
                </table>
                <div class="title">
                    <p>体检机构</p>
                </div>
                <table>
                    <tr>
                        <td colspan="2">{{ confirmOrder.hospital.name }}</td>
                    </tr>
                    <tr>
                        <td>营业时间:</td>
                        <td>{{ confirmOrder.hospital.businessHours }}</td>
                    </tr>
                    <tr>
                        <td>采血截止:</td>
                        <td>{{ confirmOrder.hospital.deadline }}</td>
                    </tr>
                    <tr>
                        <td>机构电话:</td>
                        <td>{{ confirmOrder.hospital.telephone }}</td>
                    </tr>
                    <tr>
                        <td>机构地址:</td>
                        <td>{{ confirmOrder.hospital.address }}</td>
                    </tr>
                </table>
                <div class="title">
                    <p>套餐类型</p>
                </div>
                <table>
                    <tr>
                        <td>{{ confirmOrder.setMeal.name }}</td>
                    </tr>
                </table>
            </section>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="toReportList" v-show="(confirmOrder.state == 4)">查看报告</el-button>
                    <el-button @click="toAppointmentCancel(confirmOrder.state)"
                        v-show="(confirmOrder.state == 1)">取消订单</el-button>
                    <el-button @click="toAppointmentCancel(confirmOrder.state)"
                        v-show="(confirmOrder.state == 2)">申请退款</el-button>
                    <el-button type="primary"
                        @click="toConfirmOrder(confirmOrder.hpId, confirmOrder.smId, confirmOrder.orderDate)"
                        v-show="confirmOrder.state == 1">
                        支付订单
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import Footer from '@/components/Footer.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import axios from "../plugin/axiosInstance";
import { reactive, ref } from 'vue';

const currentTab = ref('pending'); // 初始化为默认展示的标签

const orderListAll = reactive([]);
const orderListPending = reactive([]);
const orderListPaid = reactive([]);
const orderListInProgress = reactive([]);
const orderListArchived = reactive([]);
const orderListRefunding = reactive([]);
const orderListCancelled = reactive([]);
const orderListRefunded = reactive([]);

const confirmOrder = reactive({
    hpId: null,
    orderDate: null,
    smId: null,
    userId: 0,
    orderId: 0,
    hospital: {},
    user: {},
    setMeal: {},
    state: 0,
})

const buttonText = (state) => {
    switch (state) {
        case 1:
            return '待支付';
        case 2:
            return '已支付';
        case 3:
            return '进行中';
        case 4:
            return '已归档';
        case 5:
            return '退款中';
        case 6:
            return '已取消';
        case 7:
            return '已退款';
    }
}

const getconfirmOrder = (orderId) => {
    axios.get("/order/selectByOrderId/" + orderId).then(res => {
        if (res.data.code == 200) {
            confirmOrder.hospital = res.data.data.hospital;
            confirmOrder.user = res.data.data.users;
            confirmOrder.setMeal = res.data.data.setmealVo;
            confirmOrder.orderId = res.data.data.orderId;
            confirmOrder.state = res.data.data.state;
            confirmOrder.hpId = res.data.data.hpId;
            confirmOrder.orderDate = res.data.data.orderDate;
            confirmOrder.smId = res.data.data.smId;
        }
    })
}

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    done();
}

const showOrder = (orderId) => {
    getconfirmOrder(orderId);
    dialogVisible.value = true;
}

const getOrderList = () => {
    axios.get("/order/selectOrder",).then(res => {
        if (res.data.code == 200) {
            const orders = res.data.data;
            orderListPending.splice(0, orderListPending.length);
            orderListPaid.splice(0, orderListPaid.length);
            orderListInProgress.splice(0, orderListInProgress.length);
            orderListArchived.splice(0, orderListArchived.length);
            orderListRefunding.splice(0, orderListRefunding.length);
            orderListCancelled.splice(0, orderListCancelled.length);
            orderListRefunded.splice(0, orderListRefunded.length);
            orders.forEach(order => {
                orderListAll.push(order);
                switch (order.state) {
                    case 1:
                        orderListPending.push(order);
                        break;
                    case 2:
                        orderListPaid.push(order);
                        break;
                    case 3:
                        orderListInProgress.push(order);
                        break;
                    case 4:
                        orderListArchived.push(order);
                        break;
                    case 5:
                        orderListRefunding.push(order);
                        break;
                    case 6:
                        orderListCancelled.push(order);
                        break;
                    case 7:
                        orderListRefunded.push(order);
                        break;
                }
            });
            console.log(orderListPending[0]?.setmealName);
        }
    }).catch(err => {
        // Handle error
    });
}

const selectTab = (tab) => {
    currentTab.value = tab;
}

const toAppointmentCancel = (state) => {
    ElMessageBox.confirm(
        '您确定要取消订单吗?',
        'Warning',
        {
            confirmButtonText: '是的',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            dialogVisible.value = false;
            axios.post("/order/cancel", {
                orderId: confirmOrder.orderId
            }).then(res => {
                if (res.data.code == 200) {
                    router.push({ path: "/appointmentCancel", query: { state: state } });
                } else {
                    ElMessage({
                        type: 'error',
                        message: '取消订单失败',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'success',
                message: '已取消操作',
            })
        })
}

const toConfirmOrder = (hpId, smId, orderDate) => {
    dialogVisible.value = false;
    router.push({ path: "/confirmOrder", query: { hpId: hpId, smId: smId, orderDate } })
}

const toReportList = () => {
    dialogVisible.value = false;
    router.push("/reportList");
}

const init = () => {
    getOrderList();
}

init();
</script>

<style scoped>
@import "../assets/css/appointmentlist.css";

.selected {
    background-color: #007BFF; /* 选中的背景颜色 */
    color: white; /* 选中的文本颜色 */
}

.tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 每行 4 列 */
    gap: 5px; /* 按钮之间的间距 */
    margin-bottom: 20px;
    width: 100%;
    position: fixed;
    height: 12vw;
    background-color: white;
}

.tabs .el-button {
    width: 100%;
    margin: 0;
    height: 5vw;
    text-align: center;
}

.listShow{
    width: 100%;
}

/*********************** h3 标题居中 ***********************/
h3 {
    text-align: center;
    margin: 5px 0; /* 可选，增加上下边距 */
}
</style>
